<template>
  <div class="assertion-config">
    <div class="grid grid-cols-1 gap-4">
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">断言类型</label>
          <el-select 
            v-model="localStep.assertion" 
            size="small"
            @change="updateStep"
          >
            <el-option label="元素可见" value="toBeVisible" />
            <el-option label="元素隐藏" value="toBeHidden" />
            <el-option label="元素存在" value="toExist" />
            <el-option label="元素不存在" value="not.toExist" />
            <el-option label="包含文本" value="toHaveText" />
            <el-option label="包含值" value="toHaveValue" />
            <el-option label="元素启用" value="toBeEnabled" />
            <el-option label="元素禁用" value="toBeDisabled" />
            <el-option label="元素选中" value="toBeChecked" />
            <el-option label="元素未选中" value="not.toBeChecked" />
          </el-select>
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">匹配模式</label>
          <el-select 
            v-model="localStep.matchMode" 
            size="small"
            @change="updateStep"
          >
            <el-option label="精确匹配" value="exact" />
            <el-option label="包含匹配" value="contains" />
            <el-option label="正则表达式" value="regex" />
            <el-option label="忽略大小写" value="ignoreCase" />
          </el-select>
        </div>
      </div>
      
      <div v-if="needsExpectedValue" class="grid grid-cols-1 gap-3">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">期望值</label>
          <el-input
            v-model="localStep.expectedValue"
            :placeholder="getExpectedValuePlaceholder()"
            size="small"
            @change="updateStep"
          >
            <template #prepend>
              <el-icon><i-ep-check /></el-icon>
            </template>
          </el-input>
        </div>
        
        <div v-if="localStep.matchMode === 'regex'" class="text-sm text-gray-600">
          <el-icon class="mr-1"><i-ep-info-filled /></el-icon>
          正则表达式示例: ^Hello.*World$ 或 \d{3}-\d{3}-\d{4}
        </div>
      </div>
      
      <div class="border-t border-gray-200 pt-4">
        <h4 class="text-sm font-medium text-gray-700 mb-3">断言选项</h4>
        <div class="grid grid-cols-2 gap-3">
          <el-checkbox 
            v-model="localStep.soft"
            @change="updateStep"
          >
            软断言（失败时继续执行）
          </el-checkbox>
          <el-checkbox 
            v-model="localStep.not"
            @change="updateStep"
          >
            反向断言（期望不满足条件）
          </el-checkbox>
          <el-checkbox 
            v-model="localStep.waitForCondition"
            @change="updateStep"
          >
            等待条件满足
          </el-checkbox>
          <el-checkbox 
            v-model="localStep.screenshotOnFailure"
            @change="updateStep"
          >
            失败时截图
          </el-checkbox>
        </div>
      </div>
      
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">等待超时 (ms)</label>
          <el-input-number
            v-model="localStep.timeout"
            :min="1000"
            :step="1000"
            size="small"
            class="w-full"
            @change="updateStep"
          />
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">重试间隔 (ms)</label>
          <el-input-number
            v-model="localStep.retryInterval"
            :min="100"
            :step="100"
            size="small"
            class="w-full"
            @change="updateStep"
          />
        </div>
      </div>
      
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">失败消息</label>
        <el-input
          v-model="localStep.failureMessage"
          placeholder="自定义断言失败时的错误消息"
          size="small"
          @change="updateStep"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { Check as iEpCheck, InfoFilled as iEpInfoFilled } from '@element-plus/icons-vue'

const props = defineProps({
  step: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update'])

const localStep = ref({
  assertion: 'toBeVisible',
  matchMode: 'exact',
  expectedValue: '',
  soft: false,
  not: false,
  waitForCondition: true,
  screenshotOnFailure: true,
  timeout: 30000,
  retryInterval: 1000,
  failureMessage: '',
  ...props.step
})

watch(() => props.step, (newStep) => {
  localStep.value = {
    assertion: 'toBeVisible',
    matchMode: 'exact',
    expectedValue: '',
    soft: false,
    not: false,
    waitForCondition: true,
    screenshotOnFailure: true,
    timeout: 30000,
    retryInterval: 1000,
    failureMessage: '',
    ...newStep
  }
}, { deep: true })

// 计算是否需要期望值输入
const needsExpectedValue = computed(() => {
  const valueRequiredAssertions = ['toHaveText', 'toHaveValue', 'toHaveAttribute', 'toHaveClass']
  return valueRequiredAssertions.some(assertion => 
    localStep.value.assertion.includes(assertion)
  )
})

// 获取期望值占位符文本
const getExpectedValuePlaceholder = () => {
  const assertion = localStep.value.assertion
  if (assertion.includes('toHaveText')) {
    return '期望的文本内容'
  } else if (assertion.includes('toHaveValue')) {
    return '期望的输入值'
  } else if (assertion.includes('toHaveAttribute')) {
    return '期望的属性值'
  } else if (assertion.includes('toHaveClass')) {
    return '期望的CSS类名'
  }
  return '期望值'
}

const updateStep = () => {
  emit('update', localStep.value)
}
</script>